<template>
  <!--  扫描二维码展示的详情页面-->
  <a-card :bordered="true" class="card-container">
    <a-form-model
        ref="form"
        :layout='xsScreen ? "vertical" : "horizontal"'
        :model="form"
        :rules="rules"
        :style='{height:"80vh",marginTop:"30px",marginLeft: xsScreen ? "10vw" : "0vw"}'
    >
      <a-row>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"
                       label="资产编号">
            <BaseInput type="text" disabled :value="assetNumber"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"
                       label="资产名称">
            <BaseInput type="text" disabled v-model="form.assetName|| '无'"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="资产状态">
            <BaseInput disabled :value="mapAssetStatus(form.assetStatus)"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="使用项目">
            <BaseInput type="text" disabled v-model="form.currentProjectName|| '无'"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="singleCol">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"
                       label="型号参数">
            <BaseTextarea :disabled="!isEdit" v-model="form.specification" :maxLength="1000"></BaseTextarea>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="品牌">
            <BaseInput type="text" disabled v-model="form.brandName || '无'"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单位">
            <BaseInput :disabled="!isEdit" v-model="form.unitName|| '无'"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="价格">
            <BaseInput disabled v-model="form.unitPrice|| '无'" suffix="元"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="供应商">
            <BaseInput :disabled="!isEdit" v-model="form.supplierName|| '无'"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="购买类别">
            <BaseInput disabled :value="mapBuyCatalogue(form.buyCatalogue)"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="资产类别">
            <BaseInput disabled :value="mapAssetCatalogue(form.assetCatalogue)"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="保管人">
            <BaseInput v-model="form.keeperName|| '无'" :disabled="!isEdit"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="保管人电话">
            <BaseInput :disabled="!isEdit"
                       v-model="form.keeperPhone|| '无'"
                       max="11"
                       min="11"
                       type="tel"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所属单位">
            <BaseInput disabled v-model="form.ownerBranchName"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所属项目">
            <BaseInput type="text" disabled v-model="form.ownerProjectName|| '无'"></BaseInput>
          </a-form-item>
        </a-col>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="进场时间">
            <BaseInput disabled :value="formatTime(form.enterTime)"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="报废/丢失时间">
            <BaseInput disabled :value="formatTime(form.discardTime)"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="预调拨项目">
            <BaseInput disabled v-model="form.preAllotProjectName|| '无'"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="调拨时间">
            <BaseInput disabled :value="formatTime(form.allotTime)"></BaseInput>
          </a-form-item>
        </a-col>

        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="调拨次数">
            <BaseInput disabled v-model="form.allotCount|| '0'"></BaseInput>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row>

      <a-col v-bind="col2">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol2" label="验收单">
            <span v-if='!form.checkFiles || form.checkFiles.length<=0' class='wu'>-</span>
            <div v-else v-for="(f,index) in form.checkFiles">
              <span class="file">{{ index + 1 }}.</span>
              <FileLink class="file" disabled :fileList="[f]"></FileLink>
              <span class="file"> {{ formatTime(f.createTime) }}</span>
            </div>
          </a-form-item>
        </a-col>
        <a-col v-bind="col2">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol2" label="拆除验收单">
            <span v-if='!form.destroyFiles || form.destroyFiles.length<=0' class='wu'>-</span>
            <div v-else v-for="(f,index) in form.destroyFiles">
              <span class="file">{{ index + 1 }}.</span>
              <FileLink class="file" disabled :fileList="[f]"></FileLink>
              <span class="file"> {{ formatTime(f.createTime) }}</span>
            </div>
          </a-form-item>
        </a-col>
        <a-col v-bind="col2">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol2" label="报废/丢失确认单">
            <div v-if='!form.confirmFiles ||form.confirmFiles.length<=0' class='wu'>-</div>
            <div v-else v-for="(f,index) in form.confirmFiles">
              <span class="file">{{ index + 1 }}.</span>
              <FileLink class="file" disabled :fileList="[f]"></FileLink>
              <span class="file"> {{ formatTime(f.createTime) }}</span>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col v-bind="col">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="二维码">
            <div id="qrcode"></div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>
<script>
import moment from 'moment/moment'
import {
  createQrcode,
  mapAssetCatalogue,
  mapAssetStatus,
  mapBuyCatalogue,
  shareUrl
} from '@/views/materials/assets/material/model'
import { assetManageDetail } from '@/api/material/assets/assetManage'

export default {
  name: 'AssetDetailShare',
  data() {
    return {
      isEdit: false,
      detailId: undefined,
      form: {
        assetNumber: "-",
        assetName: "-",
        brandName: "-",
        ownerProjectName: "-",
        ownerOrg: null,
        ownerProjectNum: null,
        currentOrg: null,
        unitName: "-",
        preAllotProjectName: "-",
        assetStatus: null,
        totalPrice: null,
        buyCatalogue: null,
        assetCatalogue: null,
        supplierName: "-",
        keeperName: "-",
        keeperPhone: "-",
        allotTime: null,
        allotCount: null,
        preAllotOrg: null,
        discardTime: null,
        checkFiles: [],
        destroyFiles: [],
        confirmFiles: [],
      },


      col: {xs: 24, md: 12, xl: 6},
      wrapperCol: {xl: {span: 4}, sm: {span: 10},md:{span: 24}},

      singleCol: {xs: 24, md: 24, xl: 24},
      labelCol: {xl: {span: 2}, sm: {span: 2}},

      col2: {xs: 24,xl: 8},
      wrapperCol2: {xl: {span: 6}, xs: {span: 24}},

      rules: {
        supplierName: [{required: true, message: '请输入供应商名称', trigger: 'blur'}],
      }
    }
  },
  mounted() {
    //通过二维码扫描要显示该页面
    this.detailId = this.$route.query.id
    assetManageDetail(this.detailId)
        .then((res) => {
          if (res.code === '0' && res.data && res.data.detail) {
            //用详情接口更新上门的值，主要是文件列表，其他字段基本一致
            this.form = res.data && res.data.detail && res.data.detail
            this.detailId = res.data && res.data.detail && res.data.detail.id
            this.form.checkFiles = res.data && res.data.files && res.data.files[1]
            this.form.destroyFiles = res.data && res.data.files && res.data.files[2]
            this.form.confirmFiles = res.data && res.data.files && res.data.files[3]
          }
        })
  },
  computed: {
    assetNumber: function () {
      return (this.form && this.form.ownerProjectNum) ? (this.form.ownerProjectNum + "-" + this.form.assetNumber) : "-"
    },
    xsScreen() {//手机屏幕<=576
      return this.isMobileDevice || window.innerWidth <= 576
    },
    isMobileDevice(){
     return /Mobi|Android|iPhone/i.test(navigator.userAgent)
    }
  },
  methods: {
    mapAssetCatalogue,
    mapAssetStatus,
    mapBuyCatalogue,
    formatTime(time) {
      return time ? moment(time).format('YYYY-MM-DD') : '-'
    },
    createQrcode(val) {
      let url = shareUrl + val
      this.qrCode = this.qrCode || createQrcode(url,document.getElementById('qrcode'))
      this.qrCode?.makeCode(url)
    },

  },
  watch: {
    detailId: function (val) {
      if (val) {
        this.createQrcode(val)
      }
    }
  },
}
</script>
<style scoped lang="less">
.file {
  display: inline-block;
}

.card-container {
  overflow: scroll;
}

.wu{
  color: #bfbfbf;
  margin-bottom: 16px;
}
</style>